<template>
<div>
    <ul>
        <li :style="{opacity}">欢迎学习Vue！</li>
        <li>news001 <input type="text"/></li>
        <li>news002 <input type="text"/></li>
        <li>news003 <input type="text"/></li>
    </ul>
</div>
</template>

<script>

export default {
    name:'News',
    data(){
        return{
            opacity:1
        }
    },
    // mounted(){
    //     this.timer = setInterval(() => {
    //         console.log('@')
    //         this.opacity -= 0.01
    //         if(this.opacity <= 0) this.opacity = 1
    //     }, 16);
    // },
    // beforeDestroy(){
    //     console.log('News组件即将被销毁了')
    //     clearInterval(this.timer)
    // }
    //组件显示在你面前的时候被调用
    activated() {
        // console.log('News组件被激活')
        this.timer = setInterval(() => {
            console.log('@')
            this.opacity -= 0.01
            if(this.opacity <= 0) this.opacity = 1
        }, 16);
    },
    //组件被切换掉，消失在你面前的时候调用
    deactivated() {
        // console.log('News组件失活')
        clearInterval(this.timer)
    },
}
</script>
